<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Chromatic adaptation tests</title>
<link rel="stylesheet" href="https://htest.dev/htest.css" crossorigin />
<script src="https://htest.dev/htest.js" crossorigin></script>

<link rel="stylesheet" href="style.css" />


<script src="../color.js" type="module"></script>

<script type="module">
import {WHITES} from "../src/adapt.js";
import {adapt} from "../src/CATs.js";

window.WHITES = WHITES;
window.color_adapt = adapt;
</script>

</head>
<body data-epsilon=".0005">

<h1>Chromatic adaptation tests</h1>
<p>These tests adapt from one whitepoint to another.</p>

<section>
	<h1>Bradford D50 ⇔ D65</h1>
	<p>These test the linear Bradford adaptations from CATs.js against the built-in
		conversion matrices to interconvert between D50 and D65.</p>

	<table class="reftest" data-test="numbers">
		<tr title="D50 to D65">
			<td>
				<script>
					$out(() => {
						let M = color_adapt(WHITES.D50, WHITES.D65, "Bradford");
						return M;
						});
				</script>
			</td>
			<td>
				<script>
					$out(() => {
						return [
							[ 0.9555766, -0.0230393,  0.0631636],
							[-0.0282895,  1.0099416,  0.0210077],
							[ 0.0122982, -0.0204830,  1.3299098]
						];
					});
				</script>
			</td>
		</tr>
		<tr title="D65 to D50">
			<td>
				<script>
					$out(() => {
						let M = color_adapt(WHITES.D65, WHITES.D50, "Bradford");
						return M;
						});
				</script>
			</td>
			<td>
				<script>
					$out(() => {
						return [
							[ 1.0478112,  0.0228866, -0.0501270],
							[ 0.0295424,  0.9904844, -0.0170491],
							[-0.0092345,  0.0150436,  0.7521316]
						];
					});
				</script>
			</td>
		</tr>
	</table>
</section>

<section>
	<h1>Bradford Other whitepoints</h1>
	<p>These test the linear Bradford adaptations from CATs.js against
		the matrices <a href="http://www.brucelindbloom.com/index.html?Eqn_ChromAdapt.html">published by Lindbloom</a>.</p>
	<table class="reftest" data-test="numbers">
		<tr title="C to D50">
			<td>
				<script>
					$out(() => {
						let M = color_adapt(WHITES.C, WHITES.D50, "Bradford");
						return M;
						});
				</script>
			</td>
			<td>
				<script>
					$out(() => {
						return [
							[ 1.0376976,  0.0153932, -0.0582624],
 							[ 0.0170675,  1.0056038, -0.0188973],
							[-0.0120126,  0.0204361,  0.6906380]
						];
					});
				</script>
			</td>
		</tr>
		<tr title="A to C">
			<td>
				<script>
					$out(() => {
						let M = color_adapt(WHITES.A, WHITES.C, "Bradford");
						return M;
						});
				</script>
			</td>
			<td>
				<script>
					$out(() => {
						return [
								[ 0.8530161, -0.1130268,  0.4404346],
								[-0.1238786,  1.0853435,  0.1425803],
 								[ 0.0911907, -0.1553658,  3.4776250]
							];
					});
				</script>
			</td>
		</tr>
		<tr title="F2 to D50">
			<td>
				<script>
					$out(() => {
						let M = color_adapt(WHITES.F2, WHITES.D50, "Bradford");
						return M;
						});
				</script>
			</td>
			<td>
				<script>
					$out(() => {
						return [
								[ 0.9628262, -0.0215790,  0.0457172],
								[-0.0280310,  1.0172847,  0.0156071],
 								[ 0.0083415, -0.0135344,  1.2322804]
							];
					});
				</script>
			</td>
		</tr>
	</table>
</section>

<section>
	<h1>von Kries Other whitepoints</h1>
	<p>These test the von Kries adaptations from CATs.js against
		the matrices <a href="http://www.brucelindbloom.com/index.html?Eqn_ChromAdapt.html">published by Lindbloom</a>.</p>
	<table class="reftest" data-test="numbers">
		<tr title="C to D50">
			<td>
				<script>
					$out(() => {
						let M = color_adapt(WHITES.C, WHITES.D50, "von Kries");
						return M;
						});
				</script>
			</td>
			<td>
				<script>
					$out(() => {
						return [
							[ 1.0132609,  0.0457455, -0.0636638],
 							[ 0.0050248,  0.9962695, -0.0010128],
 							[ 0.0000000,  0.0000000,  0.6979583]
						];
					});
				</script>
			</td>
		</tr>
		<tr title="A to C">
			<td>
				<script>
					$out(() => {
						let M = color_adapt(WHITES.A, WHITES.C, "von Kries");
						return M;
						});
				</script>
			</td>
			<td>
				<script>
					$out(() => {
						return [
								[ 0.9418277, -0.2249131,  0.4806950],
								[-0.0247051,  1.0253682,  0.0049749],
 								[ 0.0000000,  0.0000000,  3.3225235]
							];
					});
				</script>
			</td>
		</tr>
		<tr title="F2 to D50">
			<td>
				<script>
					$out(() => {
						let M = color_adapt(WHITES.F2, WHITES.D50, "von Kries");
						return M;
						});
				</script>
			</td>
			<td>
				<script>
					$out(() => {
						return [
								[ 0.9869554, -0.0470220,  0.0479582],
								[-0.0051650,  1.0044210,  0.0010416],
 								[ 0.0000000,  0.0000000,  1.2244744]
							];
					});
				</script>
			</td>
		</tr>
	</table>
</section>

<section>
	<h1>CAT02 and CAT16, D50 ⇔ D65</h1>
	<p>These test the fully adapted CAT02 and CAT16 adaptations from CATs.js, interconverting between D50 and D65.</p>
	<table class="reftest" data-test="numbers">
		<tr title="CAT02 D50 to D65">
			<td>
				<script>
					$out(() => {
						let M = color_adapt(WHITES.D50, WHITES.D65, "CAT02");
						return M;
						});
				</script>
			</td>
			<td>
				<script>
					$out(() => {
						return [
							[ 0.9599435, -0.0292880,  0.0656334],
							[-0.0211745,  0.9988615,  0.0261212],
							[ 0.0013700,  0.0044344,  1.3124836]
						];
					});
				</script>
			</td>
		</tr>
		<tr title="CAT02 D65 to D50">
			<td>
				<script>
					$out(() => {
						let M = color_adapt(WHITES.D65, WHITES.D50, "CAT02");
						return M;
						});
				</script>
			</td>
			<td>
				<script>
					$out(() => {
						return [
							[ 1.0424827,  0.0308012, -0.0527444],
							[ 0.0221295,  1.0018823, -0.0210462],
							[-0.0011630, -0.0034170,  0.7620404]
						];
					});
				</script>
			</td>
		</tr>
		<tr title="CAT16 D50 to D65">
			<td>
				<script>
					$out(() => {
						let M = color_adapt(WHITES.D50, WHITES.D65, "CAT16");
						return M;
						});
				</script>
			</td>
			<td>
				<script>
					$out(() => {
						return [
							[ 0.9894962, -0.0399233,  0.0439904],
							[-0.0053910,  1.0066456, -0.0017541],
							[-0.0004037,  0.0150564,  1.3016843]
						];
					});
				</script>
			</td>
		</tr>
		<tr title="CAT16 D65 to D50">
			<td>
				<script>
					$out(() => {
						let M = color_adapt(WHITES.D65, WHITES.D50, "CAT16");
						return M;
						});
				</script>
			</td>
			<td>
				<script>
					$out(() => {
						return [
							[ 1.0108226,  0.0405991, -0.0341060],
							[ 0.0054139,  0.99359563, 0.0011560],
							[ 0.0002508, -0.01148016, 0.7682115]
						];
					});
				</script>
			</td>
		</tr>
		<!-- <tr title="Hunt &amp; Pointer worked example">
			<td>
				<script>
					$out(() => {
						let M = color_adapt([98.88, 90.00, 32.03], [100, 100, 100] "CAT02");
						return M;
						});
				</script>
			</td>
			<td>
				<script>
					$out(() => {
						return [
						[ 1.0478112,  0.0228866, -0.0501270],
						[ 0.0295424,  0.9904844, -0.0170491],
						[-0.0092345,  0.0150436,  0.7521316]
					];
					});
				</script>
			</td>
		</tr> -->
	</table>
</section>

<section>
	<h1>CAT16, C to D50</h1>
	<p>This tests the fully adapted CAT16 adaptation from CATs.js, Illuminant C to D50.</p>
	<table class="reftest" data-test="numbers">
		<tr title="CAT02 D50 to D65">
			<td>
				<script>
					$out(() => {
						let M = color_adapt(WHITES.C, WHITES.D50, "CAT16");
						return M;
						});
				</script>
			</td>
			<td>
				<script>
					$out(() => {
						return [
							[ 1.0059635,  0.0270676, -0.0418130],
							[ 0.0037323,  0.9940963,  0.0018973],
							[ 0.0004538, -0.0145289,  0.7098704]
						];
					});
				</script>
			</td>
		</tr>
	</table>
</section>
</body>
</html>
